<template>
    <footer>
        <router-link tag="dl" to="/">
            <dl>
                <dt><img src="../assets/logo.png" alt=""></dt>
                <dd>首页</dd>
            </dl>
        </router-link>

        <router-link  tag="dl" to="/lianxiwomen">
            <dl>
                <dt><img src="../assets/logo.png" alt=""></dt>
                <dd>联系我们</dd>
            </dl>
        </router-link>
        
        <router-link tag="dl" to="/fenlei">
            <dl>
                <dt><img src="../assets/logo.png" alt=""></dt>
                <dd>分类</dd>
            </dl>
        </router-link>
        
        <router-link tag="dl" to="/gouwuche">
            <dl>
                <dt><img src="../assets/logo.png" alt=""></dt>
                <dd>购物车</dd>
            </dl>
        </router-link>
        
        <router-link tag="dl" to="/wo">
            <dl>
                <dt><img src="../assets/logo.png" alt=""></dt>
                <dd>我</dd>
            </dl>
        </router-link>
        
    </footer>
</template>
<script>
export default {};
</script>
<style scoped lang="scss">
footer {
  display: flex;
  height: 1rem;
  margin-top: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(#000, #ccc);
  dl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    dt {
      img {
        height: 0.5rem;
        display: block;
        margin: 0.1rem auto 0.1rem;
      }
    }
    dd {
      font-size: 0.2rem;
    }
  }
  dl.router-link-exact-active {
    background-color: aquamarine;
  }
}
</style>


